import React, {useEffect, useState} from 'react';
import '../assets/css/Home.css'
import * as echarts from 'echarts';
import { Radio } from 'antd';
import moment from 'moment'
import {getRepairsList} from '../apis/repairs'
import {getQuestionsList} from '../apis/questions'
import {repairsGetcounts,repairsGetCountsList,questionsGetCountsList} from '../apis/home'
const  Home:React.FC=()=> {
    const [dataInfo,setDataInfo]:any = useState({})
    const getDataInfo = async()=>{
        const res:any = await repairsGetcounts({}).catch()
        if(res&&res.errCode===10000){
            setDataInfo(res.data)
        }
    }
    //维修列表
    const [repairs,setRepairs] = useState([])
    const getRepairsInfo = async()=>{
        const res:any = await getRepairsList({page:1,psize:5})
        if(res&&res.errCode===10000){
            setRepairs(res.data.list)
        }
    }
    const [questions,setQuestions] = useState([])
    const getQuestionsInfo = async ()=>{
        const res:any = await getQuestionsList({page:1,psize:5})
        if(res&&res.errCode===10000){
            setQuestions(res.data.list)
        }
    }
    //切换
    const echartsRadio = (val:any)=>{
        if(val.target.value===30){
            getQuestions({days: val.target.value, months: 0, years: 0},1)
        }else if(val.target.value===6){
            getQuestions({days: 0, months: val.target.value, years: 0},2)
        }else if(val.target.value===2022){
            const time = moment().format('YYYY')
            getQuestions({days: 0, months: 0, years: Number(time)},3)
        }
    }
    //获取echart数据
    const getQuestions = async (echatsInfoList:any,val:any)=>{
        const repairsList:any = await repairsGetCountsList(echatsInfoList).catch()
        const questionsList:any = await questionsGetCountsList(echatsInfoList).catch()
        if(repairsList&&questionsList&&repairsList.errCode===10000&&questionsList.errCode===10000){
            if(val===3){
                echartsInfo(repairsList.data,questionsList.data)
            }else{
                echartsInfo(repairsList.data.reverse(),questionsList.data.reverse())
            }
        }
    }
    //折线图
    const echartsInfo =(repairsList:any,questionsList:any)=>{
        // 基于准备好的dom，初始化echarts实例
        let myChart:any = echarts.init(document.getElementById('main') as HTMLElement);
        // 绘制图表
        let option;
        option={
            title: {
                text: '数据展示'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['报修总数', '投诉总数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },

            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: repairsList.map((item:any)=>(item.label))
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '报修总数',
                    type: 'line',
                    stack: 'Total',
                    data: repairsList.map((item:any)=>(item.counts))
                },
                {
                    name: '投诉总数',
                    type: 'line',
                    stack: 'Total',
                    data: questionsList.map((item:any)=>(item.counts))
                }
            ]
        }
        option && myChart.setOption(option);
        window.onresize = ()=>{
            myChart.resize()
        }
    }
    useEffect(()=>{
        getDataInfo()
        getRepairsInfo()
        getQuestionsInfo()
        getQuestions({days: 30, months: 0, years: 0},1)
    },[])
    return (
        <div className="home">
            <div className="homeLeft">
                <div className="dataBox">
                    <div>数据统计</div>
                    <div className="statistics">
                        <div className="statisInfo">
                            <div>房间总数：<span>{dataInfo.houses}</span></div>
                            <div>居民总数：<span>{dataInfo.users}</span></div>
                            <div>商店总数：<span>{dataInfo.stores}</span></div>
                        </div>
                        <div className="statisInfo">
                            <div>报修总数<span>{dataInfo.repairs}</span>处</div>
                            <div>投诉总数<span>{dataInfo.questions}</span>次</div>
                        </div>
                    </div>
                </div>
                <div className="dataBox">
                    <div>今日数据变动</div>
                    <div className="statistics">
                        <div className="statisInfo">
                            <div>新增维修：<span>{dataInfo.todayRepairs}</span>处</div>
                            <div className="line"></div>
                            <div>未处理报修：<span>{dataInfo.notFinishedRepairs}</span>处</div>
                            <div className="line"></div>
                            <div>新增投诉：<span>{dataInfo.todayQuestions}</span>次</div>
                            <div className="line"></div>
                            <div>未处理投诉：<span>{dataInfo.notAnswer}</span>次</div>
                        </div>
                    </div>
                </div>
                <div className="echartsBox">
                    <div id="main" className="echarts"></div>
                    <Radio.Group defaultValue={30} onChange={echartsRadio} className="switch" buttonStyle="solid">
                        <Radio.Button value={30}>最近30天</Radio.Button>
                        <Radio.Button value={6}>最近半年</Radio.Button>
                        <Radio.Button value={2022}>本年</Radio.Button>
                    </Radio.Group>
                </div>
            </div>
            <div className="homeRight">
                <div className="exhibitionList">
                    <div>待维修处理</div>
                    <div className="repairBox">
                        {
                            repairs.map((item:any,index:any)=>(
                                <div key={item.id} className="repairs">{index+1}、<span>{item.address}</span>：{item.content}</div>
                                )
                            )
                        }
                    </div>
                </div>
                <div className="exhibitionList">
                    <div>待投诉处理</div>
                    <div  className="repairBox">
                        {
                            questions.map((item:any,index:any)=>(
                                    <div key={item.id} className="repairs">{index+1}、<span>{item.address}</span>：{item.content}</div>
                                )
                            )
                        }
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Home;
